<template>
	<scroll-view scroll-y @scrolltolower="end" class="content" lower-threshold="500">
		<view class="top">
			<view class="icon"><image src="https://wechat-pictures-1301970825.cos.ap-beijing.myqcloud.com/shop/cfgk.png"></image></view>
			<view class="cfdt">重复观看</view>
			<view class="end-title">
				恭喜<text style="font-weight: 500;">{{info.username}}</text>答题全部正确
			</view>
			<view class="end-title">
				答题奖励由店长统一发放，请耐心等待
			</view>
			<view class="video-info">
				<view class="video-title">观看视频：{{ info.videoName }}</view>
				<view class="video-end-date">观看视频时间：{{ info.watchTime }}</view>
			</view>
      <view v-if="needInvestigate === true" class="question-button">
        <view  @click="toQuestion()">参与门店满意度调查</view>
      </view>
		</view>
		<view style="height: 30upx;"></view>
		<!-- 视频列表 -->
    <view class="list-box" v-if="false">
      <view class="list-title">
        <image :src="image_hosts+'/end/title-jinbi.png'"></image>
        看养生知识 奖励送不停
      </view>
      <view class="message">
        <view class="message-item">
          <view class="message-icon"></view>
          <text>
            看首页小视频或参与热门话题，
            <text v-if="openType===2">每天最高得{{30+upLimit}}积分哦！积分购买商品可抵现金。</text>
            <text v-if="openType===1">积分现金红包送不停！</text>
          </text>
        </view>
        <!--        <view class="message-item">-->
        <!--          <view class="message-icon"></view>-->
        <!--          积分购买商品可抵现金！-->
        <!--        </view>-->
      </view>
      <view class="list">
        <view v-for="(item,index) in videoList" @click="toVideoList(item,index)">
          <view class="item video" v-if="item.dataType===1">
            <image mode="aspectFill" class="bj" :src="item.coverUrl"></image>
            <view class="item-box">
              <view class="type-icon">
                <image :src="image_hosts+'/end/play.png'"></image>
              </view>
              <view class="video-info-box">
                <view class="video-num">
                  <image :src="image_hosts+'/end/huohua.png'"></image>
                  播放量:{{item.playCount}}
                </view>
                <view class="video-title">
                  <span class="two-row-hide">{{ item.title }}</span>
                </view>
              </view>
            </view>
          </view>
          <view class="item topic" v-if="item.dataType===2">
            <image mode="aspectFill" class="bj" :src="item.coverUrl"></image>
            <view class="item-box">
              <view class="type-icon">
                <image :src="image_hosts+'/end/title2.png'"></image>
                <text>康粉圈</text>
              </view>
              <view class="topic-title-box">
                <view class="topic-title">
                  <span class="two-row-hide">#{{ item.title }}</span>
                </view>
                <view class="topic-button">
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
		<view style="height: 170upx;"></view>
		<view  class="button">
			<view class="button-item" @click="go_index()">返回首页</view>
		</view>
  </scroll-view>
</template>

<script>
	import { get_video_img } from "../../common/new_file.js"
	export default {
		data() {
			return {
				videoList:[],
				video_id:0,
				list:[],
				info:{},
				activityId:'',
				needInvestigate: false, // 判断是否有未答的调研问卷
        image_hosts: this.image_host + 'videoAnswer',
        openType:0,
        upLimit:0
			}
		},
		onLoad(req) {
			var that = this;
			this.video_id = req.video_id;
			this.activityId = req.activityId;
			this.getInfo();
			this.get_video();
			this.authQuestion();
      this.getConfig()
		},
		methods: {
      async getConfig()
      {
        let {data}= await this.$NoteApi.doRequest("get",'ruiVideo/getCustomerRewardType','','')
        this.openType=data.data.openType
        this.upLimit=data.data.upLimit
      },
			getInfo(id) {
				var that = this;
			    let data = {
			        videoId:this.video_id,
					activityId:this.activityId
			    }
			    that.$NoteApi.doRequest("get", 'ruiVideo/vo/afterQa', data).then(res => {
			        if(res.data.code == 0) {
						this.info = res.data.data;
			           // this.list = res.data.data.list;
			        }
			    })
			},
			get_video() {
				var _this = this;
				var data = {
					videoId:this.video_id,
				};
				_this.$NoteApi.doRequest("get", "ruiVideo/afterAnswer/list", data).then(res => {
					if(res.data.code == 0){
						// _this.videoList=res.data.data.list
            _this.videoList=_this.videoList.concat(res.data.data)
						// _this.videoList=res.data.data
					}
				})
			},
			to_sindex(item) {
				if(item.type == 1) {
					var data={
						video:item,
						type:101
					}
				}
				if(item.type == 2) {
					var data={
						video:item,
						type:102
					}
				}
				if(item.type == 3) {
					var data={
						video:item,
						type:103
					}
				}
				if(item.type == 4) {
					var data={
						video:item,
						type:104
					}
				}
				uni.setStorageSync("to_index_video",data)
				uni.switchTab({
					url:'/pages/sindex/index'
				})
			},
			// 验证是否需要跳转到视频答题
			authQuestion(){
				var _this = this;
				var data = {};
				_this.$NoteApi.doRequest("post", "investigate/needInvestigate", data).then(res => {
					if(res.data.code == 0){
						if(res.data.data === 1){
							_this.needInvestigate = true
						}
            if (res.data.data !== null) {
              _this.needInvestigate = true
              _this.answerInfo = res.data.data
            }
					}
				})
			},
			// 跳转到问卷调研
			toQuestion(){
				uni.redirectTo({
					url: '/pages/newAnswer/questionnaire?video_id=' + this.video_id
				});
			},
      end()
      {
        this.get_video()
      },
			// 去首页
			go_index() {
			    uni.switchTab({
			        url:'/pages/sindex/index'
			    })
			},
      toVideoList(item,index) {
        if(item.dataType===1){ //视频
          let videoWatchedList= uni.getStorageSync('videoWatchedList')
          let list = JSON.parse(JSON.stringify(this.videoList));
          list.splice(index,1)
          let newList=list.filter(video=>{return video.dataType === 1 && !videoWatchedList.includes(video.id)})
          newList.unshift(item)
          uni.setStorageSync('newList',newList)
          uni.navigateTo({url:'/videoList/index/index'})
        }else { //话题
          uni.navigateTo(
              {url:'/pages/circle/details/details?id='+item.id}
          )
        }
      },
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
	.content{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
    overflow: auto;
	}
	.top{
		width: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 40upx 48upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.top .icon{
		width: 104upx;
		height: 104upx;
		margin-bottom: 20upx;
	}
	.top .icon image{
		width: 100%;
		height: 100%;
	}
	.top .end-title{
		width: 590upx;
		text-align: center;
		color: #333;
		font-size: 34upx;
		font-weight: 400;
		line-height: 48upx;
		margin-bottom: 40upx;
	}
	.top .end-title text{
		color: #FB7400;
	}
	.top .video-info{
		width: 100%;
		background-color: #F8F8F8;
		border-radius: 4upx;
		box-sizing: border-box;
		padding: 20upx 40upx;
		font-size: 32upx;
		color: #333;
		font-weight: 400;

	}
	.cfdt {
		padding: 20upx 0;
		font-size: 37upx;
		font-weight: 500;
	}
	.video-end-date{
		font-size: 28upx;
		color: #999999;
		margin-top: 20upx;
	}
	.button{
		width: 100%;
		height: 132upx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
	}
	.button-item {
		width: 686upx;
		height: 98upx;
		line-height: 98upx;
		text-align: center;
		background:#5CAE77;
		border-radius: 14upx;
		color: #fff;
		font-size: 40upx;
		font-weight: 700;
	}
  .question-button {
    width: 456upx;
    height: 98upx;
    border: 2upx solid #5CAE77;
    line-height: 98upx;
    text-align: center;
    color: #5CAE77;
    font-size: 40upx;
    font-weight: 500;
    border-radius: 14upx;
    margin-top: 15upx;
  }
  .list-box {
    width: 100%;
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
    margin-top: 30upx;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .list-box .list-title {
    background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/videoAnswer/end/title.png");
    background-size: 100% 100%;
    width: 662upx;
    height: 82upx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46upx;
    color: #fff;
    font-weight: 500;
    margin-top: -10upx;
    z-index: 10;
    position: absolute;
    top: -1upx;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .list-box .list-title image {
    width: 76upx;
    height: 61upx;
  }

  .message {
    width: 690upx;
    background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/videoAnswer/end/bg_tishi@2x.png");
    background-size: 100% 100%;
    margin-top: 102upx;
    box-sizing: border-box;
    padding: 10upx;
  }

  .message-item {
    width: 100%;
    display: flex;
    font-size: 34upx;
    color: #F18900;
    font-weight: 500;
    line-height: 40upx;
  }

  .message-item .message-icon {
    width: 12upx;
    height: 12upx;
    background-color: #F18900;
    border-radius: 50%;
    margin-top: 15upx;
    margin-right: 10upx;
  }

  .list {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 0 30upx;
    column-count: 2;
    column-gap: 18upx;
    margin-top: 24upx;
  }

  .item {
    width: 336upx;
    height: 516upx;
    margin-bottom: 24upx;
    position: relative;
    border-radius: 16upx;
  }

  .bj {
    width: 100%;
    height: 100%;
    border-radius: 16upx;
  }

  .item-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .1);
    border-radius: 16upx;
  }

  .type-icon {
    position: absolute;
    top: 20upx;
    left: 20upx;
    width: 50upx;
    height: 50upx;
  }

  .type-icon image {
    width: 100%;
    height: 100%;
  }

  .video-num {
    box-sizing: border-box;
    padding: 3upx 9upx;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 0 21upx 21upx 0;
    display: flex;
    align-items: center;
    width: fit-content;
    font-size: 26upx;
    color: #000000;
  }
  .video-info-box{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 2%, rgba(0,0,0,0.54) 100%);
    border-radius: 0 0 16upx 16upx;
  }
  .video-num image {
    width: 24upx;
    height: 28upx;
    margin-right: 4upx;
  }

  .item .video-title {
    max-height: 300upx;
    width: 100%;
    color: #fff;
    box-sizing: border-box;
    padding: 12upx;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 38upx;
    font-weight: 500;
    line-height: 45upx;
  }

  .topic .type-icon {
    width: 164upx;
    height: 50upx;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 0 100upx 100upx 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 12upx;
    left: 0;
    font-size: 32upx;
    color: #00C141;
    font-weight: 400;
  }

  .topic .type-icon image {
    width: 34upx;
    height: 34upx;
    margin-right: 6upx;
  }

  .topic-title-box {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    padding: 12upx;
    background: linear-gradient(180deg, rgba(0,0,0,0) 2%, rgba(0,0,0,0.54) 100%);
    border-radius: 0 0 16upx 16upx;
    width: 100%;
  }

  .topic-title {
    font-size: 38upx;
    color: #fff;
    font-weight: 500;
    word-break: break-all;
    width: 100%;
  }

  .button-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: env(safe-area-inset-bottom);
    padding-top: 20upx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .button-box .button {
    width: 686upx;
    height: 98upx;
    background-color: #5CAE77;
    border-radius: 14upx;
    color: #fff;
    font-size: 40upx;
    font-weight: 500;
    line-height: 98upx;
    text-align: center;
  }
  .two-row-hide {
    white-space: normal;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
